windBardChart("./res/windBard.json");
// 功能：读取数据
// 参数：路径
// 返回：null
function windBardChart(path){
  //$ajax()获取文件
  $.ajax({
    url: path,
    dataType: 'json'
}).then(function (resp){
  windBardData = resp;
  const data = windBardData.data.map(function (entry) {
    return [entry.time, entry.windSpeed, entry.R, entry.AQI];
  });
  drawWindBard(data);
})

  // d3.json(path, function (windBardData) {
  //   const data = windBardData.data.map(function (entry) {
  //     return [entry.time, entry.windSpeed, entry.R, entry.AQI];
  //   });

  //   drawWindBard(data);

  // })
}

// 功能：绘制风向图
// 参数：风向数据
// 返回：null
function drawWindBard(data){
  var windBardDom = document.getElementById('windBard');
  var windBardChart = echarts.init(windBardDom);
  var windBardOption;

  const directionMap = {};
    // prettier-ignore
    ['W', 'WSW', 'SW', 'SSW', 'S', 'SSE', 'SE', 'ESE', 'E', 'ENE', 'NE', 'NNE', 'N', 'NNW', 'NW', 'WNW'].forEach(function (name, index) {
        directionMap[name] = Math.PI / 8 * index;
    });

    const dims = {
      time: 0,
      windSpeed: 1,
      R: 2,
      AQI: 3,
      minTemp: 3,
      maxTemp: 4
    };
    const arrowSize = 18;
    const renderArrow = function (param, api) {
      const point = api.coord([
        api.value(dims.time),
        api.value(dims.windSpeed)
      ]);
      return {
        type: 'path',
        shape: {
          pathData: 'M31 16l-15-15v9h-26v12h26v9z',
          x: -arrowSize / 2,
          y: -arrowSize / 2,
          width: arrowSize,
          height: arrowSize
        },
        rotation: directionMap[api.value(dims.R)],
        position: point,
        style: api.style({
          stroke: '#555',
          lineWidth: 1
        })
      };
    };
    windBardOption = {
      title:{
        text: '风力风向与AQI关联分析',
        textStyle:{
          color:'	#FFFFFF',
        }
      },
      tooltip: {
        trigger: 'axis',
        formatter: function (params) {
          return [
            echarts.format.formatTime(
              'yyyy-MM-dd',
              params[0].value[dims.time]
            ) +
              ' ' +
              echarts.format.formatTime('hh:mm', params[0].value[dims.time]),
            '风速：' + params[0].value[dims.windSpeed],
            '风向：' + params[0].value[dims.R],
            'AQI：' + params[0].value[dims.AQI]
          ].join('<br>');
        }
      },

      grid: {
        top: 40,
        bottom: 80
      },
      xAxis: {
        type: 'time',
        maxInterval: 3600 * 1000 * 24,
        splitLine: {
          lineStyle: {
            color: '#ddd'
          }
        }
      },
      yAxis: [
        {
          name: '风速',
          nameLocation: 'middle',
          nameGap: 35,
          axisLine: {
            lineStyle: {
              color: '#666'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#ddd'
            }
          }
        },
        {
          name: 'AQI',
          nameLocation: 'middle',
          nameGap: 35,
          max: 500,
          axisLine: {
            lineStyle: {
              color: '#015DD5'
            }
          },
          splitLine: { show: false }
        },
        {
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: { show: false },
          splitLine: { show: false }
        }
      ],
      visualMap: {
        type: 'piecewise',
        orient: 'horizontal',
        left: 'center',
        bottom: 10,
        textStyle:{
          color: '#FFFFFF'
        },
        pieces: [
          {
            gte: 3.3,
            color: '#D33C3E',
            label: '大风（风速>3.3）'
          },
          {
            gte: 1.5,
            lt: 3.3,
            color: '#E68514',
            label: '中风（风速1.5~3.3）'
          },
          {
            gte: 0.2,
            lt: 1.5,
            color: '#18BF12',
            label: '小风（风速0.2~1.5）'
          },
          {
            lt: 0.2,
            color: '#f4e9a3',
            label: '无风（风速<0.2）'
          }
        ],
        seriesIndex: 1,
        dimension: 1
      },
      dataZoom: [
        {
          type: 'inside',
          // xAxisIndex: 0,
          // minSpan: 0.17,
          // maxSpan: 1
        },
      ],
      series: [
        
        {
          type: 'line',
          yAxisIndex: 1,
          showSymbol: false,
          emphasis: {
            scale: false
          },
          symbolSize: 10,
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              global: false,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(88,160,253,1)'
                },
                {
                  offset: 0.5,
                  color: 'rgba(88,160,253,0.7)'
                },
                {
                  offset: 1,
                  color: 'rgba(88,160,253,0)'
                }
              ]
            }
          },
          lineStyle: {
            color: 'rgba(88,160,253,1)'
          },
          itemStyle: {
            color: 'rgba(88,160,253,1)'
          },
          encode: {
            x: dims.time,
            y: dims.AQI
          },
          data: data,
          z: 2
        },
        {
          type: 'custom',
          renderItem: renderArrow,
          encode: {
            x: dims.time,
            y: dims.windSpeed
          },
          data: data,
          z: 10
        },
        {
          type: 'line',
          symbol: 'none',
          encode: {
            x: dims.time,
            y: dims.windSpeed
          },
          lineStyle: {
            color: '#aaa',
            type: 'dotted'
          },
          data: data,
          z: 1
        }
      ]

    };
    windBardChart.setOption(windBardOption);
    windBardOption && windBardChart.setOption(windBardOption);
    // windBardChart.on("click", params => {
    //   console.log(params.data[0]);
    //   // let systemDate = params.data[0];
    //   // callFigures(systemDate);
    //   // document.getElementById("myDate").value = systemDate;
  
    // })
}
